body {
    /* background: #f2f2f2; */
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background: linear-gradient(135deg, #000 5%, #fff 50%, #000 100%);
    color: #fff;
    font-family: 'Open Sans', Helvetica, sans-serif;
}

.ruby {
    position: absolute;
    width: 192px;
    height: 126px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;

    .bottom-left {
        position: absolute;
        z-index: 2;
        width: 0;
        height: 0;
        left: 0;
        bottom: 0;
        border-style: solid;
        border-width: 84px 0px 0px 96px;
        border-color: #000 transparent transparent transparent;
    }
    .bottom-right {
        position: absolute;
        z-index: 2;
        width: 0;
        height: 0;
        right: 0;
        bottom: 0;
        border-style: solid;
        border-width: 84px 96px 0px 0px;
        border-color: #333 transparent transparent transparent;
    }
    .bottom-middle {
        position: absolute;
        z-index: 3;
        width: 0;
        height: 0;
        left: 54px;
        bottom: 0;
        border-style: solid;
        border-width: 84px 42px 0px 42px;
        border-color: #222 transparent transparent transparent;
    }

    .top-left-left {
        position: absolute;
        z-index: 2;
        width: 0;
        height: 0;
        top: 0;
        left: 0;
        border-style: solid;
        border-width: 0px 22px 42px 32px;
        border-color: transparent transparent #111 transparent;
    }
    .top-left {
        position: absolute;
        z-index: 1;
        width: 64px;
        height: 42px;
        top: 0;
        left: 32px;
        background: #555;
    }
    .top-middle {
        position: absolute;
        z-index: 2;
        width: 0;
        height: 0;
        top: 0;
        left: 54px;
        border-style: solid;
        border-width: 0px 42px 42px 42px;
        border-color: transparent transparent #444 transparent;
    }
    .top-right {
        position: absolute;
        z-index: 1;
        width: 64px;
        height: 42px;
        top: 0;
        right: 32px;
        background: #999;
        overflow: hidden;

        .flash {
            position: absolute;
            width: 4px;
            height: 80px;
            top: -40px;
            left: 30px;
            background: #fff;
            transform: rotate(-44deg) translateX(-30px);
            box-shadow: 0 0 5px 0 #ffdfdf;
            animation: flash 3s linear infinite both;
        }
    }
    .top-right-right {
        position: absolute;
        z-index: 2;
        width: 0;
        height: 0;
        top: 0;
        right: 0;
        border-style: solid;
        border-width: 0px 32px 42px 22px;
        border-color: transparent transparent #333 transparent;
    }
}

@keyframes flash {
    0% {
        transform: rotate(-44deg) translateX(-30px);
    }
    10%,
    100% {
        transform: rotate(-44deg) translateX(30px);
    }
}
